<template>
  <el-row>
    <el-col :span="6">
      <el-statistic :value="overviewData.effectiveActivityCount">
        <template #title>
          <div style="display: inline-flex; align-items: center">
            市场活动
          </div>
        </template>
        <template #suffix>/{{overviewData.activityCount}}</template>
      </el-statistic>
    </el-col>
    <el-col :span="6">
      <el-statistic title="线索总数" :value="overviewData.clueCount" />
    </el-col>
    <el-col :span="6">
      <el-statistic title="客户总数" :value="overviewData.customerCount" />
    </el-col>
    <el-col :span="6">
      <el-statistic :value="overviewData.successTranAmount">
        <template #title>
          <div style="display: inline-flex; align-items: center">
            交易总额

          </div>
        </template>
        <template #suffix>/{{ overviewData.tranAmount }}</template>
      </el-statistic>
    </el-col>
  </el-row>
  <br/><br/>

  <!--展示销售漏斗图-->
  <div id="saleFunnel" style="width: 48%; height:350px; margin:10px; float: left;"> 图表到时候就展示在该div里面 </div>

  <!--展示线索来源统计饼图-->
  <div id="clueSourcePie" style="width: 48%; height:350px; margin:10px; float: left;"> 图表到时候就展示在该div里面 </div>

  <!--展示市场活动按月统计柱状图（今年截止到本月）-->
  <div id="activityBar" style="clear: both; width: 95%; height:300px; margin:15px; text-align: center;"> 图表到时候就展示在该div里面 </div>

  <!--展示线索按天统计柱状图（本月）-->
  <div id="clueBar" style="clear: both; width: 95%; height:300px; margin:15px; text-align: center;"> 图表到时候就展示在该div里面 </div>

  <!--展示客户按天统计柱状图（本月）-->
  <div id="customerBar" style="clear: both; width: 95%; height:300px; margin:15px; text-align: center;"> 图表到时候就展示在该div里面 </div>

  <!--展示交易按天统计柱状图（本月）-->
  <div id="tranBar" style="clear: both; width: 95%; height:300px; margin:15px; text-align: center;"> 图表到时候就展示在该div里面 </div>


</template>
<script>
import * as echarts from 'echarts';
import {doGet} from "@/http/httpRequest";

export default {
  name: "statisticView",
  data(){
    return{
      overviewData:{},
    }
  },
  mounted() {
    this.loadSaleFunnel();
    this.loadOverviewData();
    this.loadClueSourcePie();
    this.loadActivityBar();
    this.loadClueBar();
    this.loadCustomerBar();
    this.loadTranBar();

  },

  methods : {
    //加载销售漏斗图
    loadSaleFunnel() {
      //在渲染图表之前，先把数据查出来，这样才可以渲染图表
      doGet("/api/funnel/data", {}).then(resp => {
        if (resp.data.code === 200) {
          let saleFunnelDataList = resp.data.data;
          //1、根据id获取页面的dom元素
          var chartDom = document.getElementById('saleFunnel');
          //2、初始值该dom元素，得到一个图表对象
          var myChart = echarts.init(chartDom);
          //3、配置可选项
          var option = {
            //标题组件，包含主标题和副标题。
            title: {
              //主标题文本，支持使用 \n 换行。
              text: '销售漏斗图',
              //title 组件离容器左侧的距离。(居中)
              left : 'center',
              //title 组件离容器上侧的距离。
              top : 'bottom'
            },
            //提示框组件。
            tooltip: {
              //触发类型。item表示数据项图形触发
              trigger: 'item',
              //提示框浮层内容格式器，{a}（系列名称），{b}（数据项的名称），{c}（数据项的数值）, {d}（百分比）
              formatter: '{a} <br/>{b} : {c}'
            },
            //工具栏
            toolbox: {
              //各工具配置项
              feature: {
                //数据视图工具，可以展现当前图表所用的数据，编辑后可以动态更新。
                dataView: {
                  //是否不可编辑（只读）。
                  readOnly: false
                },
                //配置项还原
                restore: {},
                //保存为图片
                saveAsImage: {}
              }
            },
            //图例组件
            legend: {
              //图例的数据数组。数组项通常为一个字符串，每一项代表一个系列的 name
              data: ['线索', '客户', '交易', '成交']
            },
            //系列（它是代表你使用的是哪一种类型的图表）
            series: [
              {
                //系列名称
                name: '销售漏斗数据',
                //系列类型（代表我们使用的是哪一种图表，此处我们是漏斗图）
                type: 'funnel',
                //漏斗图组件离容器(<div>)左侧的距离。
                left: '10%',
                //漏斗图组件离容器(<div>)上侧的距离。
                top: 60,
                //漏斗图组件离容器下侧的距离。
                bottom: 60,
                //漏斗图组件的宽度。默认自适应。
                width: '80%',
                //指定的数据最小值。
                min: 0,
                //指定的数据最大值。
                max: 100,
                //数据最小值 min 映射的宽度。
                minSize: '0%',
                //数据最大值 max 映射的宽度。
                maxSize: '100%',
                //数据排序
                sort: 'descending',
                //数据图形间距。
                gap: 2,
                //漏斗图图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。
                label: {
                  //标签文本是否要展示
                  show: true,
                  //标签的位置。'inside' 漏斗图梯形内部。
                  position: 'inside'
                },
                //标签的视觉引导线样式
                labelLine:  {
                  //视觉引导线的长度。
                  length: 10,
                  //视觉引导线的样式
                  lineStyle: {
                    //线宽
                    width: 1,
                    //线的类型。
                    type: 'solid'
                  }
                },
                //图形样式
                itemStyle: {
                  //图形的描边颜色
                  borderColor: '#fff',
                  //描边线宽
                  borderWidth: 1
                },
                //高亮的标签和图形样式
                emphasis: {
                  //标签文本
                  label: {
                    //标签文本字体大小
                    fontSize: 20
                  }
                },
                //数据项，系列中的数据内容数组。
                /*data: [
                  //value是数据项值，name是数据项名称，数组项可以为单个数值，也可以是数组对象
                  { value: 100, name: '线索' },
                  { value: 80, name: '客户' },
                  { value: 60, name: '交易' },
                  { value: 20, name: '成交' },
                ]*/
                data : saleFunnelDataList //从后台查询出来的真实数据
              }
            ]
          };
          //4、如果配置了可选项，把可选性设置到图表对象中
          option && myChart.setOption(option);
        }
      })
    },
    //加载概览统计数据
    loadOverviewData() {
      doGet("/api/overview/data", {}).then(resp => {
        if (resp.data.code === 200) {
          this.overviewData = resp.data.data;
        }
      })
    },

    //加载线索来源统计饼图
    loadClueSourcePie() {
      //在渲染图表之前，先把数据查出来，这样才可以渲染图表
      doGet("/api/pie/data", {}).then( resp => {
        if (resp.data.code === 200) {
          let sourcePieDataList = resp.data.data;
          //1、根据id获取页面的dom元素
          var chartDom = document.getElementById('clueSourcePie');
          //2、初始值该dom元素，得到一个图表对象
          var myChart = echarts.init(chartDom);
          //3、配置可选项
          var option = {
            //标题组件
            title: {
              //标题的文本
              text: '线索来源统计',
              //title 组件离容器左侧的距离。(居中)
              left: 'center',
              //title 组件离容器上侧的距离。
              top : 'bottom'
            },
            //提示框组件。
            tooltip: {
              //触发类型。item表示数据项图形触发
              trigger: 'item'
            },
            //图例组件
            legend: {
              //图例列表的布局朝向。'horizontal'水平，'vertical'垂直
              orient: 'horizontal',
              //图例组件离容器左侧的距离。
              left: 'center'
            },
            //系列（它是代表你使用的是哪一种类型的图表）
            series: [
              {
                //系列名称
                name: '线索来源统计',
                //系列类型是饼图
                type: 'pie',
                //饼图的半径
                radius: '60%',
                //数据项
                /*data: [
                  { value: 1048, name: 'Search Engine' },
                  { value: 735, name: 'Direct' },
                  { value: 580, name: 'Email' },
                  { value: 484, name: 'Union Ads' },
                  { value: 300, name: 'Video Ads' }
                ],*/
                data: sourcePieDataList, //从后台查询得到的数据
                //高亮状态的扇区和标签样式。
                emphasis: {
                  //项目的样式
                  itemStyle: {
                    //图形阴影的模糊大小
                    shadowBlur: 10,
                    //阴影水平方向上的偏移距离。
                    shadowOffsetX: 0,
                    //阴影颜色
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }
            ]
          };
          //4、如果配置了可选项，把可选性设置到图表对象中
          option && myChart.setOption(option);
        }
      })
    },

    //加载市场活动每月统计柱状图
    loadActivityBar() {
      //在渲染图表之前，先把数据查出来，这样才可以渲染图表
      doGet("/api/activity/bar/data", {}).then(resp => {
        if (resp.data.code === 200) {
          console.log(resp);

          //X轴数据
          let xData = resp.data.data.xaxisData;
          console.log(xData);
          //Y轴数据
          let yData = resp.data.data.yaxisData;
          console.log(yData);

          //1、根据id获取页面的dom元素
          var chartDom = document.getElementById('activityBar');
          //2、初始值该dom元素，得到一个图表对象
          var myChart = echarts.init(chartDom);
          //3、配置可选项
          var option = {
            //标题组件
            title: {
              //标题的文本
              text: '市场活动统计',
              //title 组件离容器左侧的距离。(居中)
              left: 'center',
              //title 组件离容器上侧的距离。
              top : 'bottom'
            },
            //提示框组件。
            tooltip: {
              //触发类型。axis表示坐标轴触发
              trigger: 'axis',
              //坐标轴指示器配置项。
              axisPointer: {
                //坐标轴指示器类型。shadow阴影指示器
                type: 'none'
              }
            },
            //直角坐标系内绘图网格
            grid: {
              //grid 组件离容器左侧的距离。
              left: '2%',
              //grid 组件离容器右侧的距离。
              right: '2%',
              //grid 组件离容器下侧的距离。
              bottom: '15%',
              //grid 区域是否包含坐标轴的刻度标签。
              containLabel: true
            },
            //直角坐标系 grid 中的 x 轴
            xAxis: [
              {
                //坐标轴类型。category表示类目轴
                type: 'category',
                //X轴的数据项
                //data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                data: xData,
                //坐标轴刻度相关设置
                axisTick: {
                  //保证刻度线和标签对齐
                  alignWithLabel: true
                }
              }
            ],
            ////直角坐标系 grid 中的 y 轴
            yAxis: [
              {
                //坐标轴类型。'value' 数值轴，适用于连续数据。
                type: 'value'
              }
            ],
            //系列（它是代表你使用的是哪一种类型的图表）
            series: [
              {
                //系列的名称
                name: '活动数据',
                //系列类型是柱状图
                type: 'bar',
                //柱条的宽度，不设时自适应。
                barWidth: '20%',
                //y轴的数据项
                //data: [10, 52, 200, 334, 390, 330, 220]
                data: yData
              }
            ]
          };
          //4、如果配置了可选项，把可选性设置到图表对象中
          option && myChart.setOption(option);
        }
      })
    },

    //加载线索每天统计柱状图
    loadClueBar() {
      //在渲染图表之前，先把数据查出来，这样才可以渲染图表
      doGet("/api/clue/bar/data", {}).then(resp => {
        if (resp.data.code === 200) {
          console.log(resp);

          //X轴数据
          let xData = resp.data.data.xaxisData;
          console.log(xData);
          //Y轴数据
          let yData = resp.data.data.yaxisData;
          console.log(yData);

          //1、根据id获取页面的dom元素
          var chartDom = document.getElementById('clueBar');
          //2、初始值该dom元素，得到一个图表对象
          var myChart = echarts.init(chartDom);
          //3、配置可选项
          var option = {
            //标题组件
            title: {
              //标题的文本
              text: '线索数据统计',
              //title 组件离容器左侧的距离。(居中)
              left: 'center',
              //title 组件离容器上侧的距离。
              top : 'bottom'
            },
            //提示框组件。
            tooltip: {
              //触发类型。axis表示坐标轴触发
              trigger: 'axis',
              //坐标轴指示器配置项。
              axisPointer: {
                //坐标轴指示器类型。shadow阴影指示器
                type: 'none'
              }
            },
            //直角坐标系内绘图网格
            grid: {
              //grid 组件离容器左侧的距离。
              left: '2%',
              //grid 组件离容器右侧的距离。
              right: '2%',
              //grid 组件离容器下侧的距离。
              bottom: '15%',
              //grid 区域是否包含坐标轴的刻度标签。
              containLabel: true
            },
            //直角坐标系 grid 中的 x 轴
            xAxis: [
              {
                //坐标轴类型。category表示类目轴
                type: 'category',
                //X轴的数据项
                //data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                data: xData,
                //坐标轴刻度相关设置
                axisTick: {
                  //保证刻度线和标签对齐
                  alignWithLabel: true
                }
              }
            ],
            ////直角坐标系 grid 中的 y 轴
            yAxis: [
              {
                //坐标轴类型。'value' 数值轴，适用于连续数据。
                type: 'value'
              }
            ],
            //系列（它是代表你使用的是哪一种类型的图表）
            series: [
              {
                //系列的名称
                name: '线索数据',
                //系列类型是柱状图
                type: 'bar',
                //柱条的宽度，不设时自适应。
                barWidth: '20%',
                //y轴的数据项
                //data: [10, 52, 200, 334, 390, 330, 220]
                data: yData
              }
            ]
          };
          //4、如果配置了可选项，把可选性设置到图表对象中
          option && myChart.setOption(option);
        }
      })
    },

    //加载客户每天统计柱状图
    loadCustomerBar() {
      //在渲染图表之前，先把数据查出来，这样才可以渲染图表
      doGet("/api/customer/bar/data", {}).then(resp => {
        if (resp.data.code === 200) {
          console.log(resp);

          //X轴数据
          let xData = resp.data.data.xaxisData;
          console.log(xData);
          //Y轴数据
          let yData = resp.data.data.yaxisData;
          console.log(yData);

          //1、根据id获取页面的dom元素
          var chartDom = document.getElementById('customerBar');
          //2、初始值该dom元素，得到一个图表对象
          var myChart = echarts.init(chartDom);
          //3、配置可选项
          var option = {
            //标题组件
            title: {
              //标题的文本
              text: '客户数据统计',
              //title 组件离容器左侧的距离。(居中)
              left: 'center',
              //title 组件离容器上侧的距离。
              top : 'bottom'
            },
            //提示框组件。
            tooltip: {
              //触发类型。axis表示坐标轴触发
              trigger: 'axis',
              //坐标轴指示器配置项。
              axisPointer: {
                //坐标轴指示器类型。shadow阴影指示器
                type: 'none'
              }
            },
            //直角坐标系内绘图网格
            grid: {
              //grid 组件离容器左侧的距离。
              left: '2%',
              //grid 组件离容器右侧的距离。
              right: '2%',
              //grid 组件离容器下侧的距离。
              bottom: '15%',
              //grid 区域是否包含坐标轴的刻度标签。
              containLabel: true
            },
            //直角坐标系 grid 中的 x 轴
            xAxis: [
              {
                //坐标轴类型。category表示类目轴
                type: 'category',
                //X轴的数据项
                //data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                data: xData,
                //坐标轴刻度相关设置
                axisTick: {
                  //保证刻度线和标签对齐
                  alignWithLabel: true
                }
              }
            ],
            ////直角坐标系 grid 中的 y 轴
            yAxis: [
              {
                //坐标轴类型。'value' 数值轴，适用于连续数据。
                type: 'value'
              }
            ],
            //系列（它是代表你使用的是哪一种类型的图表）
            series: [
              {
                //系列的名称
                name: '客户数据',
                //系列类型是柱状图
                type: 'bar',
                //柱条的宽度，不设时自适应。
                barWidth: '20%',
                //y轴的数据项
                //data: [10, 52, 200, 334, 390, 330, 220]
                data: yData
              }
            ]
          };
          //4、如果配置了可选项，把可选性设置到图表对象中
          option && myChart.setOption(option);
        }
      })
    },

    //加载交易柱状图
    loadTranBar() {
      //在渲染图表之前，先把数据查出来，这样才可以渲染图表
      doGet("/api/tran/bar/data", {}).then(resp => {
        if (resp.data.code === 200) {
          let xData = resp.data.data.axisData;
          let yData1 = resp.data.data.tranSuccessData;
          let yData2 = resp.data.data.tranData;

          //1、根据id获取页面的dom元素
          var chartDom = document.getElementById('tranBar');
          //2、初始值该dom元素，得到一个图表对象
          var myChart = echarts.init(chartDom);

          var app = {};
          app.config = {
            rotate: 90,
            align: 'left',
            verticalAlign: 'middle',
            position: 'insideBottom',
            distance: 15,
          };
          const labelOption = {
            show: true,
            position: app.config.position,
            distance: app.config.distance,
            align: app.config.align,
            verticalAlign: app.config.verticalAlign,
            rotate: app.config.rotate,
            formatter: '{c}  {name|{a}}',
            fontSize: 16,
            rich: {
              name: {}
            }
          };

          //3、配置可选项
          var option = {
            //标题组件
            title: {
              //标题的文本
              text: '交易数据统计',
              //title 组件离容器左侧的距离。(居中)
              left: 'center',
              //title 组件离容器上侧的距离。
              top : 'bottom'
            },
            //提示框组件。
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'shadow'
              }
            },
            //图例组件
            legend: {
              data: ['成交', '交易']
            },
            //直角坐标系内绘图网格
            grid: {
              //grid 组件离容器左侧的距离。
              left: '2%',
              //grid 组件离容器右侧的距离。
              right: '2%',
              //grid 组件离容器下侧的距离。
              bottom: '15%',
              //grid 区域是否包含坐标轴的刻度标签。
              containLabel: true
            },
            xAxis: [
              {
                type: 'category',
                axisTick: { show: false },
                //X轴数据
                //data: ['2012', '2013', '2014', '2015', '2016']
                data: xData
              }
            ],
            yAxis: [
              {
                type: 'value'
              }
            ],
            series: [
              {
                name: '成交',
                type: 'bar',
                barGap: 0,
                //柱条的宽度，不设时自适应。
                barWidth: '45%',
                //图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。
                label: labelOption,
                emphasis: {
                  focus: 'series'
                },
                //y轴成交的交易额
                //data: [320, 332, 301, 334, 390]
                data: yData1
              },
              {
                name: '交易',
                type: 'bar',
                //柱条的宽度，不设时自适应。
                barWidth: '45%',
                label: labelOption,
                emphasis: {
                  focus: 'series'
                },
                //y轴总的交易额
                //data: [220, 182, 191, 234, 290]
                data: yData2
              },
            ]
          };
          //4、如果配置了可选项，把可选性设置到图表对象中
          option && myChart.setOption(option);
        }
      })
    }

  }
}
</script>
<style scoped>
.el-row {
  text-align: center;
}
</style>